import 'package:flutter/material.dart';
import 'package:rainflutter/config/style.dart';
import 'package:rainflutter/widget/button_widget.dart';
import 'package:rainflutter/widget/line.dart';

typedef ClickCallback = void Function(int selectIndex, String selectString,
    {Map<String, dynamic> info});

class YpBottomSheet {
  /// 弹出底部文字
  static void showText(BuildContext context, List<String> titleList,
      {String title, bool showRedText = false, ClickCallback clickCallback}) {
    int maxIndex = titleList.length ?? 0;
    maxIndex = maxIndex > 8 ? 8 : maxIndex;

    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return AnimatedPadding(
              padding: MediaQuery.of(context).viewInsets,
              duration: const Duration(milliseconds: 100),
              child: Container(
                color: EsColors.White,
                constraints: BoxConstraints(
                    minHeight: 120, maxHeight: maxIndex * 40 + 50.0),
                child: Column(
                  children: <Widget>[
                    Visibility(
                      visible: title?.isNotEmpty ?? false,
                      child: Padding(
                        padding: EdgeInsets.only(top: 20),
                        child: Text(title ?? "",
                            style: TextStyle(
                                fontSize: EsSizes.SM, color: EsColors.Content),
                            textAlign: TextAlign.center),
                      ),
                    ),
                    Container(
                      constraints: BoxConstraints(
                        minHeight: 50,
                        maxHeight: maxIndex * 40.0,
                      ),
                      child: ListView.separated(
                        itemCount: titleList?.length ?? 0,
                        shrinkWrap: true,
                        padding: EdgeInsets.zero,
                        itemBuilder: (BuildContext context, int index) {
                          return GestureDetector(
                            child: Container(
                              alignment: Alignment.center,
                              height: 40,
                              color: Colors.white,
                              child: Text(titleList[index] ?? '',
                                  style: TextStyle(
                                      fontSize: EsSizes.SM,
                                      color: EsColors.Content)),
                            ),
                            onTap: () {
                              clickCallback(index, titleList[index]);
                              Navigator.of(context).pop(index);
                            },
                          );
                        },
                        separatorBuilder: (context, index) => Container(
                            color: EsColors.BackGroundSecondary, height: 1),
                      ),
                    ),
                    Container(color: EsColors.BackGroundSecondary, height: 1),
                    GestureDetector(
                      onTap: () {
                        Navigator.of(context).pop();
                      },
                      child: Container(
                          height: 40,
                          alignment: Alignment.center,
                          color: EsColors.White,
                          child: Text('取消',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  fontWeight: EsFontWeights.Normal,
                                  color: showRedText
                                      ? EsColors.Primary
                                      : EsColors.Content))),
                    )
                  ],
                ),
              ));
        });
  }

  ///  弹出带X 带选择框 按钮的地库弹出框
  static void showSelect(BuildContext context, List<String> titleList,
      {String title, int selectIndex, ClickCallback clickCallback}) {
    List<Map<String, dynamic>> selectMapList = [];
    int maxIndex = titleList.length ?? 0;
    maxIndex = maxIndex > 6 ? 6 : maxIndex;
    for (var i = 0; i < titleList.length; i++) {
      selectMapList.add({'select': (i == selectIndex)});
    }

    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15), topRight: Radius.circular(15))),
        builder: (BuildContext context) {
          return StatefulBuilder(builder: (context1, state1) {
            return AnimatedPadding(
                padding: MediaQuery.of(context).viewInsets,
                duration: const Duration(milliseconds: 100),
                child: Stack(
                  children: [
                    Container(
                      padding: EdgeInsets.only(top: 20),
                      decoration: BoxDecoration(
                        color: EsColors.White,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(15),
                            topRight: Radius.circular(15)),
                      ),
                      constraints: BoxConstraints(
                        minHeight: 90,
                        maxHeight: maxIndex * 50 +
                            60.0 +
                            MediaQuery.of(context).padding.bottom,
                      ),
                      child: Column(
                        children: <Widget>[
                          Row(
                            children: [
                              SizedBox(width: 36),
                              Expanded(
                                child: Text(title ?? "",
                                    style: TextStyle(
                                        fontSize: EsSizes.SM,
                                        color: EsColors.Content),
                                    textAlign: TextAlign.center),
                              ),
                              EsIconButton(
                                Icon(
                                  Icons.close,
                                  size: 24,
                                  color: EsColors.Fill,
                                ),
                                padding: EdgeInsets.only(right: 12),
                                onTap: () {
                                  Navigator.of(context).pop();
                                },
                              )
                            ],
                          ),
                          Container(
                            constraints: BoxConstraints(
                              minHeight: 50,
                              maxHeight: maxIndex * 50.0,
                            ),
                            child: ListView.separated(
                              itemCount: titleList?.length ?? 0,
                              shrinkWrap: true,
                              padding: EdgeInsets.only(
                                  left: 12,
                                  bottom:
                                      MediaQuery.of(context).padding.bottom +
                                          60),
                              itemBuilder: (BuildContext context, int index) {
                                return GestureDetector(
                                  child: Container(
                                      height: 50,
                                      color: Colors.white,
                                      child: Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: [
                                          Expanded(
                                            child: Text(titleList[index] ?? '',
                                                style: TextStyle(
                                                    fontSize: EsSizes.SM,
                                                    color: EsColors
                                                        .TitleSecondary)),
                                          ),
                                          Icon(
                                              selectMapList[index]['select']
                                                  ? Icons.radio_button_checked
                                                  : Icons
                                                      .radio_button_unchecked,
                                              size: 16,
                                              color: selectMapList[index]
                                                      ['select']
                                                  ? EsColors.Primary
                                                  : EsColors.Fill),
                                          SizedBox(width: 12)
                                        ],
                                      )),
                                  onTap: () {
                                    state1(() {
                                      selectIndex = index;
                                      for (var i = 0;
                                          i < selectMapList.length;
                                          i++) {
                                        selectMapList[i]['select'] =
                                            i == selectIndex;
                                      }
                                    });
                                  },
                                );
                              },
                              separatorBuilder: (context, index) => SizedBox(),
                            ),
                          ),
                          SizedBox(height: 10),
                        ],
                      ),
                    ),
                    Positioned(
                        left: 0,
                        right: 0,
                        bottom: 0,
                        child: Container(
                          height: 60,
                          color: EsColors.White,
                          child: EsBottomWidget(
                              decoration: null,
                              fontSize: EsSizes.SM,
                              leftTitle: null,
                              rightTitle: '提交',
                              rightlick: () {
                                if (selectIndex != null) {
                                  Navigator.of(context).pop(selectIndex);
                                  clickCallback(
                                      selectIndex, titleList[selectIndex]);
                                } else {}
                              }),
                        ))
                  ],
                ));
          });
        });
  }

  static void showPayWay(BuildContext context, ClickCallback clickCallback) {
    int index = 0;
    showModalBottomSheet(
        context: context,
        // isDismissible: true,
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15), topRight: Radius.circular(15))),
        builder: (BuildContext context) {
          return StatefulBuilder(builder: (context1, state1) {
            return AnimatedPadding(
                //showModalBottomSheet 键盘弹出时自适应
                padding: MediaQuery.of(context).viewInsets,
                duration: const Duration(milliseconds: 100),
                child: Container(
                    constraints: BoxConstraints(
                      minHeight: 90,
                      maxHeight: MediaQuery.of(context).size.height / 1.2,
                    ),
                    child: ListView(shrinkWrap: true, children: [
                      Container(
                          alignment: Alignment.bottomCenter,
                          padding: EdgeInsets.only(top: 12),
                          child: Row(
                            children: [
                              SizedBox(width: 36),
                              Expanded(
                                child: Text('选择支付方式',
                                    style: TextStyle(
                                        fontSize: EsSizes.MD,
                                        color: EsColors.Title,
                                        fontWeight: EsFontWeights.Normal),
                                    textAlign: TextAlign.center),
                              ),
                              EsIconButton(
                                Icon(
                                  Icons.close,
                                  size: 24,
                                  color: EsColors.Fill,
                                ),
                                padding: EdgeInsets.only(right: 12),
                                onTap: () {
                                  Navigator.of(context).pop();
                                },
                              )
                            ],
                          )),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 12, vertical: 20),
                        child: Row(
                          children: [
                            Image.asset('assets/images/selectIcon1.png',
                                width: 16, height: 16),
                            SizedBox(
                              width: 8,
                            ),
                            Text(
                              '礼品卡（已选2张，共5张）',
                              style: TextStyle(
                                  color: EsColors.TitleSecondary,
                                  fontSize: EsSizes.MD,
                                  fontWeight: EsFontWeights.Normal),
                            ),
                            Expanded(
                                child: Text(
                              '￥100.00',
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              textAlign: TextAlign.end,
                              style: TextStyle(
                                  color: EsColors.TitleSecondary,
                                  fontSize: EsSizes.MD,
                                  fontWeight: EsFontWeights.Medium),
                            ))
                          ],
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 36, bottom: 18),
                        height: 155,
                        child: ListView.builder(
                            itemCount: 5,
                            scrollDirection: Axis.horizontal,
                            shrinkWrap: true,
                            itemBuilder: (context, index) {
                              return GestureDetector(
                                onTap: () {
                                  print('选择礼品卡');
                                },
                                child: Stack(children: [
                                  Container(
                                    width: 190,
                                    padding: EdgeInsets.all(6),
                                    margin: EdgeInsets.only(right: 10),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: [
                                        Image.network(
                                            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01475456c17a516ac7256cb073bfa3.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633444036&t=ca44f607bd0eae33f65c55c182a49e6e',
                                            width: 176,
                                            height: 100),
                                        Expanded(child: SizedBox(height: 2)),
                                        Text(
                                          '中秋节礼品卡',
                                          style: TextStyle(
                                              color: EsColors.TitleSecondary,
                                              fontSize: EsSizes.XS,
                                              fontWeight: EsFontWeights.Normal),
                                        ),
                                        Row(
                                          children: [
                                            Expanded(
                                              child: Text(
                                                '￥500.00',
                                                maxLines: 1,
                                                overflow: TextOverflow.ellipsis,
                                                style: TextStyle(
                                                    color:
                                                        EsColors.TitleSecondary,
                                                    fontSize: EsSizes.XS,
                                                    fontWeight:
                                                        EsFontWeights.Medium),
                                              ),
                                            ),
                                            Text(
                                              '有效期至:2019-09-21',
                                              style: TextStyle(
                                                  color: EsColors.Fill,
                                                  fontSize: EsSizes.XXS,
                                                  fontWeight:
                                                      EsFontWeights.Normal),
                                            )
                                          ],
                                        )
                                      ],
                                    ),
                                    decoration: BoxDecoration(
                                        color: EsColors.White,
                                        border: Border.all(
                                          color: EsColors.Primary,
                                          width: 1,
                                        ),
                                        borderRadius: BorderRadius.circular(3)),
                                  ),
                                  Positioned(
                                      left: 0,
                                      top: 0,
                                      child: Image.asset(
                                          'assets/images/selected_left.png',
                                          width: 47,
                                          height: 47))
                                ]),
                              );
                            }),
                      ),
                      YpLine(),
                      GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          state1(() {
                            index = 0;
                            print('切换支付方式微信');
                          });
                        },
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 12, vertical: 20),
                          child: Row(
                            children: [
                              Image.asset(
                                  index == 0
                                      ? 'assets/images/selectIcon1.png'
                                      : 'assets/images/select1.png',
                                  width: 16,
                                  height: 16),
                              SizedBox(
                                width: 8,
                              ),
                              Text(
                                '微信支付',
                                style: TextStyle(
                                    color: EsColors.TitleSecondary,
                                    fontSize: EsSizes.MD,
                                    fontWeight: EsFontWeights.Normal),
                              ),
                              Expanded(
                                  child: Text(
                                '￥100.00',
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                textAlign: TextAlign.end,
                                style: TextStyle(
                                    color: EsColors.TitleSecondary,
                                    fontSize: EsSizes.MD,
                                    fontWeight: EsFontWeights.Medium),
                              ))
                            ],
                          ),
                        ),
                      ),
                      YpLine(),
                      GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          state1(() {
                            index = 1;
                            print('切换支付方式支付宝');
                          });
                        },
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 12, vertical: 20),
                          child: Row(
                            children: [
                              Image.asset(
                                  index == 1
                                      ? 'assets/images/selectIcon1.png'
                                      : 'assets/images/select1.png',
                                  width: 16,
                                  height: 16),
                              SizedBox(
                                width: 8,
                              ),
                              Text(
                                '支付宝支付',
                                style: TextStyle(
                                    color: EsColors.TitleSecondary,
                                    fontSize: EsSizes.MD,
                                    fontWeight: EsFontWeights.Normal),
                              ),
                              Expanded(
                                  child: Text(
                                '￥100.00',
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                textAlign: TextAlign.end,
                                style: TextStyle(
                                    color: EsColors.TitleSecondary,
                                    fontSize: EsSizes.MD,
                                    fontWeight: EsFontWeights.Medium),
                              ))
                            ],
                          ),
                        ),
                      ),
                      YpLine(),
                      SizedBox(height: 27),
                      Center(
                        child: RichText(
                          text: TextSpan(
                            children: [
                              TextSpan(
                                text: '应付：',
                                style: TextStyle(
                                    color: EsColors.Primary,
                                    fontSize: EsSizes.XS,
                                    fontWeight: EsFontWeights.Normal),
                              ),
                              TextSpan(
                                text: '￥422.08',
                                style: TextStyle(
                                    color: EsColors.Primary,
                                    fontSize: EsSizes.LG,
                                    fontWeight: EsFontWeights.Medium),
                              )
                            ],
                          ),
                        ),
                      ),
                      SizedBox(height: 16),
                      EsBottomWidget(
                          leftTitle: null,
                          rightTitle: '确认付款',
                          rightlick: () {
                            print('确认付款');
                            Navigator.of(context).pop();
                            clickCallback(index, index == 0 ? '微信' : '支付宝',
                                info: {'gift': ''});
                          },
                          decoration: null)
                    ])));
          });
        });
  }
}
